<template>
	<view>
		<block v-if="marketingType=='wholesale'">
			<view class="cu-modal bottom-modal" :class="showModal?'show':''" @tap="showModal=false">
				<view class="cu-dialog border-radius-top bg-white  " @tap.stop="" v-if="currentSku && detail">
					<view class="space-between padding">
						<image :src="(currentSku && currentSku.picture)?currentSku.picture:detail.picture" class="cu-avatar xl  default-bg"
						 mode="aspectFill"></image>
						<view class="w100 text-left padding-left">
							<view class="">
								<text class="text-price text-red text-lg">{{currentSku?currentSku.wholesale_price:'0'}}</text>
								<text class="text-price  text-gray text-sm margin-left" v-if="currentSku && currentSku.price>0">{{currentSku?currentSku.price:'-'}}</text>
							</view>
							<view class="text-overflow-2 product-name margin-top-xs">
								{{detail.name}}
							</view>
						</view>
					</view>
					<view class="margin-lr text-left">
						<block v-for="(attribute,index) in detail.base_attribute_format" :key="index" v-if="detail.is_attribute">
							<view class="text-bold text-black">选择{{attribute.title}}：</view>
							<view class="margin-top-sm margin-bottom">
								<block v-for="(value_item,value_index) in attribute.value" :key="value_index">
									<view v-if="attribute.show_type == 2" @tap="chooseAttributeHandle(index, value_item)" class="cu-btn sm margin-right-sm"
									 style="padding:2px;" :class="chooseAttribute[index] == value_item.base_spec_value_id?'line-blue':'line-gray'">
										<view class="color-view" :style="'background-color: '+value_item.data+';'"></view>
									</view>
									<view v-else @tap="chooseAttributeHandle(index, value_item)" class="cu-btn sm margin-right-sm" :class="chooseAttribute[index] == value_item.base_spec_value_id?'line-blue':'line-gray'">{{value_item.title}}</view>
								</block>
							</view>
						</block>
						<view class="text-bold text-black">数量</view>
						<view class="space-between align-center margin-top-sm">
							<numberBox :value="number" :min="1" :max="1" v-on:change="onNumberChange($event)"></numberBox>
							<view class="text" v-if="detail.is_stock_visible == 1">剩余库存：
								<text>{{currentSku.stock==0?'-':currentSku.stock}}</text>
							</view>
						</view>

						<view class="space-between align-center margin-top margin-bottom">
							<view>总价: </view>
							<text class="text-red padding-left text-price">{{totalPrice}}</text>
						</view>
					</view>
					<view class="cu-bar bg-white tabbar  shop solid-top ">
						<view class="action text-black" @tap="goPage('/pages/shop/index')">
							<view class="cuIcon-home"></view> 首页
						</view>
						<button class="action" open-type="contact" @tap="openServiceModal">
							<view class="cuIcon-service text-black">
								<!-- <view class="cu-tag badge"></view> -->
							</view>
							客服
						</button>
						<view class="btn-group  margin-left">
							<!-- <button class="cu-btn  round  w100" :class="'bg-'+theme" @tap="buy" v-if="wholesale_id">
								确定参团
							</button>
							<button class="cu-btn  round  w100" :class="'bg-'+theme" @tap="buy" v-else>
								确定开团
							</button> -->
							<button class="cu-btn round light w100 margin-right-sm" style="background-color: #000000;color: #ffffff;" @tap="goWholesale(0)">手动拼购</button>
							<button class="cu-btn round w100" :class="'bg-'+theme" @tap="goWholesale(1)">自动拼购</button>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="cu-modal bottom-modal" :class="showModal?'show':''" @tap="showModal=false">
				<view class="cu-dialog border-radius-top bg-white  " @tap.stop="" v-if="currentSku && detail">
					<view class="space-between padding">
						<image :src="(currentSku && currentSku.picture)?currentSku.picture:detail.picture" class="cu-avatar xl  default-bg"
						 mode="aspectFill"></image>
						<view class="w100 text-left padding-left">
							<view class="">
								<text class="text-price text-red text-lg">{{currentSku?currentSku.price:'0'}}</text>
								<text class="text-price text-decoration text-gray text-sm margin-left" v-if="currentSku && currentSku.market_price>0">{{currentSku?currentSku.market_price:'-'}}</text>
							</view>
							<view class="text-overflow-2 product-name margin-top-xs">
								{{detail.name}}
							</view>
						</view>
					</view>
					<view class="margin-lr text-left">
						<block v-for="(attribute,index) in detail.base_attribute_format" :key="index" v-if="detail.is_attribute">
							<view class="text-bold text-black">选择{{attribute.title}}：</view>
							<view class="margin-top-sm margin-bottom">
								<block v-for="(value_item,value_index) in attribute.value" :key="value_index">
									<view v-if="attribute.show_type == 2" @tap="chooseAttributeHandle(index, value_item)" class="cu-btn sm margin-right-sm"
									 style="padding:2px;" :class="chooseAttribute[index] == value_item.base_spec_value_id?'line-blue':'line-gray'">
										<view class="color-view" :style="'background-color: '+value_item.data+';'"></view>
									</view>
									<view v-else @tap="chooseAttributeHandle(index, value_item)" class="cu-btn sm margin-right-sm" :class="chooseAttribute[index] == value_item.base_spec_value_id?'line-blue':'line-gray'">{{value_item.title}}</view>
								</block>
							</view>
						</block>
						<view class="text-bold text-black">数量</view>
						<view class="space-between align-center margin-top-sm">
							<numberBox :value="number" :min="1" v-on:change="onNumberChange($event)"></numberBox>
							<view class="text" v-if="detail.is_stock_visible == 1">剩余库存：
								<text>{{currentSku.stock==0?'-':currentSku.stock}}</text>
							</view>
						</view>

						<view class="space-between align-center margin-top margin-bottom">
							<view>总价: </view>
							<text class="text-red padding-left text-price">{{totalPrice}}</text>
						</view>
					</view>
					<view class="cu-bar bg-white tabbar  shop solid-top ">
						<view class="action text-black" @tap="goPage('/pages/shop/index')">
							<view class="cuIcon-home"></view> 首页
						</view>
						<button class="action" open-type="contact" @tap="openServiceModal">
							<view class="cuIcon-service text-black">
								<!-- <view class="cu-tag badge"></view> -->
							</view>
							客服
						</button>
						<view class="action text-black" @tap="goPage('/pages/shop/cart/index')">
							<view class="cuIcon-cart">
								<view class="cu-tag badge " v-if="cartNum>0" :class="addSuccess?'animation-scale-down':''">{{cartNum}}</view>
							</view>
							购物车
						</view>

						<view class="btn-group  margin-left ">
							<block v-if="detail.point_exchange_type==1 && detail.whole_exchange_type != 2 && detail.thing_exchange_type != 2">
								<button class="cu-btn  light round-left w100" :class="'bg-'+theme" v-if="joinLoading">
									<text class="cuIcon-loading2 cuIconfont-spin"></text> 加载中
								</button>
								<button class="cu-btn light round-left w100" :class="'bg-'+theme" @tap="joinCart" v-else>加入购物车</button>
								<button class="cu-btn  round-right  w100" :class="'bg-'+theme" @tap="buy('buy_now')">
									<text v-if="detail.is_virtual==2">立即进货</text>
									<text v-else>立即购买</text>
								</button>
							</block>
							<block v-else-if="detail.point_exchange_type==3 && detail.whole_exchange_type != 2 && detail.thing_exchange_type != 2">
								<button class="cu-btn light round-left w100" :class="'bg-'+theme" @tap="buy('point_exchange')">积分兑换</button>
								<button class="cu-btn  round-right  w100" :class="'bg-'+theme" @tap="buy('buy_now')">
									<text v-if="detail.is_virtual==2">立即进货</text>
									<text v-else>立即购买</text>
								</button>
							</block>
							<block v-else>
								<button class="cu-btn  round  w100" :class="'bg-'+theme" @tap="buy('point_exchange')">
									<text v-if="detail.is_virtual==2">立即进货</text>
									<text v-else>立即购买</text>
								</button>
							</block>
						</view>
					</view>
				</view>
			</view>
		</block>
		<serviceView ref="serviceView"></serviceView>
	</view>
</template>

<script>
	import serviceView from '@/components/default/serviceView.vue'
	import numberBox from '@/components/shop/numberBox.vue'
	export default {
		components: {
			numberBox,
			serviceView
		},
		props: {
			marketingType: {
				type: String,
				default: ''
			}
		},
		filters: {},
		created: function(e) {},
		data() {
			return {
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				showModal: false,
				detail: null,
				chooseAttribute: [],
				currentSku: null,
				totalPrice: 0,
				showAttribute: false,
				number: 1,
				joinLoading: false,
				cartNum: 0,
				addSuccess: false,
				wholesale_id: 0,
				merchant_id: 0,
			}
		},
		methods: {
			show(wholesale_id = 0) {
				this.wholesale_id = wholesale_id
				this.showModal = true
				// this.addSuccess = true
				// setTimeout((r) => {
				this.addSuccess = false
				// }, 1000)
				this.$common.getCartNum().then((num) => {
					this.cartNum = num
				})
			},
			hide(){
				this.showModal = false
			},
			setWholesaleid(id) {
				this.wholesale_id = id
			},
			setData(data) {
				this.detail = data
				this.merchant_id = data.merchant_id
				//多规格商品设置默认值
				if (this.detail.is_attribute) {
					for (var i = 0; i < this.detail.base_attribute_format.length; i++) {
						this.chooseAttribute[i] = this.detail.base_attribute_format[i].value[0].base_spec_value_id
					}
				}
				this.currentSku = this.detail.sku[0]
				console.log(this.currentSku)
				this.mathTotalPrice()
			},
			chooseAttributeHandle(index, item) {
				
				this.chooseAttribute[index] = item.base_spec_value_id
				for (var i = 0; i < this.detail.sku.length; i++) {
					if (this.detail.sku[i].data == this.chooseAttribute.join('-')) {
						this.currentSku = this.detail.sku[i]
						break
					}
				}
				this.mathTotalPrice()
			},
			mathTotalPrice() {
				let p = parseInt(this.number) * parseFloat(this.currentSku.price)
				if (this.marketingType == 'wholesale') {
					p = parseInt(this.number) * parseFloat(this.currentSku.wholesale_price)
				}
				this.totalPrice = p.toFixed(2)
			},
			joinCart() {
				if (this.$common.loginAuth(true)) {
					if (this.joinLoading) return
					if (!this.currentSku) {
						this.$common.showError('产品数据有误')
						return
					}
					this.joinLoading = true
					this.addSuccess = false
					uni.showLoading({
						title: '加载中...'
					})
					this.$http
						.post('card_create', {
							sku_id: this.currentSku.id,
							num: this.number
						})
						.then((response) => {
							this.$common.showSuccess('添加成功')
							uni.hideLoading()
							this.joinLoading = false
							this.$common.rmCache('cart_num')
							this.$common.getCartNum().then((num) => {
								this.$emit("cartNumChange", num)
								this.cartNum = num
								this.addSuccess = true
							})
						})
						.catch((response) => {
							uni.hideLoading()
							this.joinLoading = false
						})
				}
			},
			goWholesale(t){
				this.$emit('sureJoin',{
					t:t,
					product_id:this.currentSku.product_id,
					sku_id:this.currentSku.id
				})
			},
			buy(type) {
				// var type = 'buy_now'
				
				if(this.detail.point_exchange_type > 1 && this.detail.point_exchange_type !=3 ) type = 'point_exchange'
				if(this.detail.whole_exchange_type == 2) type = 'whole_exchange'
				if(this.detail.thing_exchange_type == 2) type = 'thing_exchange'
				
				if (this.$common.loginAuth(true)) {
					if (this.currentSku) {
						var param = {
							sku_id: this.currentSku.id,
							num: this.number
						}
						if (this.marketingType == 'wholesale') param.wholesale_product_id = this.detail.wholesale.id
					} else this.$common.showError('请选择商品')

					let urlParams = "?type=" + type + "&merchant_id=" + this.merchant_id + "&data=" + decodeURIComponent(JSON.stringify(
						param))

					if (this.marketingType == 'wholesale') {
						urlParams += "&wholesale_product_id=" + this.detail.wholesaleProduct.id
						if (this.wholesale_id) urlParams += "&wholesale_id=" + this.wholesale_id
					}

					//渠道商品
					if (this.detail.is_virtual == 2) {
						uni.navigateTo({
							url: "/pages/shop/order/settle_channel" + urlParams
						})
					} else {
						uni.navigateTo({
							url: "/pages/shop/order/settle" + urlParams
						})
					}
				}
			},
			onNumberChange(e) {
				this.number = e
				this.mathTotalPrice()
			},
			openServiceModal() {
				this.$refs.serviceView.show()
				// window.open('https://uclient.yunque360.com/frame.html?company_id=cjch051hm27mtl')
				// (function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/647cfb665881c5ee62274c0e78aaad3b0/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();
				
				
			},
		},
	}
</script>

<style>
	@import "../../colorui/animation.css";

	.color-view {
		width: 80rpx;
		height: 40rpx;
	}

	.cu-bar.tabbar.shop .action {
		width: 100upx;
	}

	.round-left {
		border-radius: 40rpx 0 0 40rpx;
	}

	.round-right {
		border-radius: 0 40rpx 40rpx 0;
	}
</style>
